<template>
	<view>
		<!-- 	<view v-for="(item,index) in imageList" :key="index" style="width: 230rpx;"
			class="flex align-center justify-center pt-2 position-relative">
			<image :src="item.fileSuffix" style="width: 210rpx;height: 210rpx;" class="bg-light rounded"
				@click="preview(item.fileSuffix)">
			</image>

			<view class="flex align-center justify-center rounded-circle"
				style="width: 60rpx;height: 60rpx;position: absolute;top: 1rpx;right: 10rpx;background-color: rgba(0,0,0,0.5);"
				@click="deleteImage(item)">
				<uv-icon name="close" size="28"></uv-icon>
			</view>
		</view> -->

		<!-- 	<view v-if="imageList.length < limit" @click="popWindow" class="my_button">
			<view> <text class="iconfont icon-shangchuan" style="font-size: 24rpx;padding-right: 2px;"></text>
			</view>
			<view>
				上传文件
			</view>

		</view> -->
		<view v-if="imageList.length < limit" @click="popWindow" class="flex align-end">
			<view> <text class="iconfont icon-shangchuan text-primary"
					style="font-size: 26rpx;padding-right: 5px;"></text>
			</view>
			<view style="color: #3c9cff;">
				上传文件
			</view>

		</view>
		<!-- 		<view v-for="(item,index) in imageList" :key="index" style="width: 90%;">
			<view class="flex align-center justify-between">
				<view @click="preview(item)" style="color: #3c9cff;">
					{{item.fileName}}
				</view>
				<view @click="deleteImage(item)">
					<uv-icon name="close" size="16"></uv-icon>
				</view>
			</view>
		</view> -->
		<uv-action-sheet ref="actionSheet" :actions="actions" title="请选择" @select="actionsSelect">
		</uv-action-sheet>
	</view>
</template>

<script>
	import tip from '@/common/util/tip.js'
	import $H from '@/common/lib/request.js'
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			limit: {
				type: Number,
				default: 100
			}
		},
		data() {
			return {
				actions: [{
					name: '拍照'
				}, {
					name: '相册'
				}, {
					name: '微信文件'
				}],
				imageList: [],
				upload: false,
				progress: 40
			}
		},
		watch: {
			list: {
				immediate: true,
				handler(newValue) {
					this.imageList = newValue;
				},
				deep: true
			}
		},
		mounted() {
			this.imageList = this.list
		},
		methods: {
			popWindow() {
				this.$refs.actionSheet.open();
			},
			actionsSelect({
				name
			}) {

				if (name === '拍照') {
					this.pictureChooseImage()
				} else if (name === '相册') {
					this.photoAlbumChooseImage()
				} else {
					// #ifdef MP-WEIXIN
					this.wxChooseMessageFile()
					// #endif
					// #ifdef H5
					this.unChooseFile()
					// #endif
				}
			},
			// 选择相机
			pictureChooseImage() {
				uni.chooseImage({
					count: this.limit - this.imageList.length,
					sizeType: ['compressed'],
					sourceType: ['camera'],
					extension: ['.png', '.jpg', '.bmp', '.gif', '.xlsx', '.pdf'],
					success: (res) => {

						// // 上传
						res.tempFiles.forEach(item => {
							this.upload = true
							$H.uploadWithToken('/api/serverplat/wechat/uploadFile', {
								filePath: item.path
							}, (progress) => {
								console.log('上传进度', progress);
								this.progress = progress
							}).then((res) => {

								this.upload = false
								let obj = res[0]
								this.imageList.push(obj)
								this.$emit('update', this.imageList)
							})
						})
					}
				})
			},
			// 选择相册
			photoAlbumChooseImage() {
				uni.chooseImage({
					count: this.limit - this.imageList.length,
					sizeType: ['compressed'],
					sourceType: ['album'],
					extension: ['.png', '.jpg', '.bmp', '.gif', '.xlsx', '.pdf'],
					success: (res) => {

						// // 上传
						res.tempFiles.forEach(item => {
							this.upload = true
							$H.uploadWithToken('/api/serverplat/wechat/uploadFile', {
								filePath: item.path
							}, (progress) => {
								this.progress = progress
							}).then((res) => {

								this.upload = false
								let obj = res[0]
								this.imageList.push(obj)
								this.$emit('update', this.imageList)
							})
						})
					}
				})
			},
			// 选择文件
			wxChooseMessageFile() {
				let _this = this
				wx.chooseMessageFile({
					count: this.limit - this.imageList.length,
					type: 'file',
					extension: ['txt', 'doc', 'docx', 'xls', 'xlsx', 'pdf'],
					success: (res) => {

						// // 上传
						res.tempFiles.forEach(item => {
							this.upload = true
							$H.uploadWithToken('/api/serverplat/wechat/uploadFile', {
								filePath: item.path
							}, (progress) => {
								this.progress = progress
							}).then((res) => {

								this.upload = false
								let obj = res[0]
								this.imageList.push(obj)
								this.$emit('update', this.imageList)
							})
						})
					}
				})
			},
			unChooseFile() {
				let _this = this
				uni.chooseFile({
					count: this.limit - this.imageList.length,
					extension: ['.txt', '.doc', '.docx', '.xls', '.xlsx', '.pdf'],
					success(res) {

						res.tempFiles.forEach(item => {
							this.upload = true
							$H.uploadWithToken('/api/serverplat/wechat/uploadFile', {
								filePath: item.path
							}, (progress) => {
								this.progress = progress
							}).then((res) => {
								this.upload = false
								let obj = res[0]

								_this.imageList.push(obj)
								_this.$emit('update', _this.imageList)
							})
						})
					},
					fail(err) {
						console.error('选择文件失败:', err);
					},
					complete() {
						console.log('选择文件完成');
					}
				});
			},
			// 预览图片
			preview(item) {
				let fileSuffix = item.fileSuffix
				let pattern = /(jpeg|jpg|png|gif)$/i;
				let judgment = pattern.test(fileSuffix)
				if (judgment) {
					uni.previewImage({
						current: item,
						urls: [fileSuffix]
					})
				} else {
					tip.toast('当前文件类型不支持预览');

					// uni.previewImage({
					// 	current: item,
					// 	urls: [fileSuffix]
					// })
				}
			},
			// 删除图片
			deleteImage(item) {
				uni.showModal({
					content: '是否要删除该图片？',
					success: (res) => {
						if (res.confirm) {
							let index = this.imageList.findIndex(url => url === item)
							if (index !== -1) {
								this.imageList.splice(index, 1)
								this.$emit('update', this.imageList)
							}
						}
					}
				});
			}
		}
	}
</script>

<style>
	.my_button {
		width: 150rpx;
		display: flex;
		align-items: flex-end;
		background-color: #5ac725;
		background-clip: green;
		padding: 4px;
		border-radius: 5rpx;
		color: #fff;
		font-size: 12px;
		/* color: #fff; */

	}
</style>